<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>

    <style>
        <!--后代选择器-->
        ul p{
            background: #b3ffb4;
        }

        /*子选择器*/
        body>p{
            color: #ff79ff;
            background: greenyellow;
        }

        /*相邻兄弟选择器*/
        .neiborhod + p{
            background: aqua;
        }

        /*通用选择器*/
        .neiborhod~p{
            background: green;
        }


    </style>



</head>
<body>

<p>p1</p>
<p>p2</p>
<p class="neiborhod">p3</p>
<p class="neiborhod">p9</p>

<ul>
    <li>
        <p>p4</p>
    </li>
    <li>
        <p>p5</p>
    </li>
    <li>
        <p>p6</p>
    </li>

</ul>

<p class="neiborhod">p8</p>


</body>
</html>